<template>
  <div>
    <fTitle :tit="'赏金规则'" />
    <a-form :label-col="{ span: 2 }" :wrapper-col="{ span: 10 }">
      <a-form-item label="发放方式">
        <a-select disabled v-model="empWay">
          <a-select-option value="1"> 一次性发放 </a-select-option>
          <a-select-option value="2"> 阶段性发放 </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="赏金金额">
        <a-input disabled v-model="empMoneyReward" />
      </a-form-item>
      <a-form-item label="薪资范围">
        <div v-for="(item, index) in empRule" :key="index">
          <a-input disabled v-model="item.workingTime" style="width: 144px" />
          <span class="ant-form-text"> </span>
          <a-select disabled v-model="item.timeType" style="width: 144px">
            <a-select-option value="1"> 天 </a-select-option>
            <a-select-option value="2"> 月 </a-select-option>
          </a-select>
          <span class="ant-form-text"> 发放 </span>
          <a-input disabled style="width: 228px" v-model="item.grantCount">
            <a-select disabled slot="addonAfter" v-model="item.grantType">
              <a-select-option value="1"> % &nbsp; </a-select-option>
              <a-select-option value="2"> 元 &nbsp; </a-select-option>
            </a-select>
          </a-input>
        </div>
      </a-form-item>
    </a-form>
    <fTitle :tit="'内推范围'" />
    <div class="qy pl42">
      <a-button class="mr12" :disabled="true"> 选择企业 </a-button>
      <div class="yxz" v-if="empCompanyIds.length > 0">
        已选择
        <span v-for="(item, index) in empCompanyIds" :key="index">
          <span v-if="index < 2"> <span v-if="index == 1"> 、</span> {{ item.name }} </span>
        </span>
        <span v-if="empCompanyIds.length > 2">
          等 <span class="icon-color">{{ empCompanyIds.length }}</span> 家
        </span>
      </div>
      <span v-else>当前未选择</span>
    </div>
    <fTitle :tit="'内推人详情'" />
    <div class="xq-form-wrapper">
      <a-spin :spinning="spinning" class="xq-form-content" style="margin-top: 24px">
        <XqTable
          :customize="FormJson['config']['table']['customize']"
          :scroll="{ x: columns.length * 150 }"
          :pagination="false"
          :dataSource="tableData"
          :columns="columns"
          :row-selection="
            FormJson['config']['table']['extend']['batch']
              ? {
                  selectedRowKeys: selectedRowKeys,
                  onChange: onSelectChange
                }
              : null
          "
          class="xq-form-content-table"
          @change="onTableChange"
        >
          <!-- 主要内容，表格，自定义 header -->
          <template v-for="(col, index) in columns" v-slot:[`xq_${col.dataIndex}`]>
            <span :key="index">
              {{ col.customTitle }}
            </span>
          </template>
          <!-- 主要内容，表格，自定义 td -->
          <!-- eslint-disable-next-line prettier/prettier -->
          <template v-for="(col, index) in columns" v-slot:[col.dataIndex]="text, record">
            <span v-if="col.dataIndex === 'empName'" :key="index"> <img :src="record.avatar" class="avatar" /> {{ text }} </span>
            <XqTableCell v-else :key="index" :record="record" :field="FormJson['fields'][col.dataIndex]" :dynamicData="dynamicData" />
          </template>
        </XqTable>
        <div class="xq-form-content-pagination">
          <div class="xq-form-content-pagination-total">共 {{ total }} 条</div>
          <a-pagination
            v-model="pageNo"
            :page-size="pageSize"
            :total="total"
            :show-size-changer="true"
            :show-quick-jumper="true"
            :page-size-options="['10', '20', '50', '100']"
            @change="onPageChange"
            @showSizeChange="onPageSizeChange"
          />
        </div>
      </a-spin>
    </div>
  </div>
</template>

<script>
import fTitle from "../../../../component/fTitle";
import FormJson from "./FormJson";
import XqCurdMixin from "xqjr-plugin-form/mixins/XqCurdMixin";
import { getEmpPostInfo, getFindById } from "../../../api";
const curdMixin = new XqCurdMixin({
  FormJson,
  tableConfigKey: "table"
});

export default {
  mixins: [curdMixin],
  components: {
    fTitle
  },
  data() {
    return {
      spinning: false,
      tableData: [],
      total: 0,
      pageNo: 1,
      pageSize: 20,
      empWay: "",
      empMoneyReward: "",
      empRule: [{ workingTime: "", timeType: "1", grantCount: "", grantType: "1" }],
      empCompanyIds: []
    };
  },
  created() {
    this.onGetEmpPostInfo();
    this.onGetFindById();
  },
  methods: {
    async onGetFindById() {
      try {
        const { data } = await getFindById(this.$route.query.id);
        this.empMoneyReward = data.empMoneyReward;
        this.empRule = data.empRule ? JSON.parse(data.empRule) : [{ workingTime: "", timeType: "1", grantCount: "", grantType: "1" }];
        this.empCompanyIds = data.empCompanyIds ? JSON.parse(data.empCompanyIds) : [];
        this.empWay = this.empRule.length > 1 ? "2" : "1";
      } catch (err) {
        console.log("error log --> ", err);
      }
    },
    async onGetEmpPostInfo() {
      try {
        this.spinning = true;
        const { data } = await getEmpPostInfo({
          postId: this.$route.query.id,
          pageNo: this.pageNo,
          pageSize: this.pageSize
          // "orders[0].property": "isEmergency"
          // "orders[0].desc": true,
        });
        this.tableData = data.entities;
        this.total = data.entityCount;
        setTimeout(() => (this.spinning = false), 500);
      } catch (err) {
        console.log("error log --> ", err);
        setTimeout(() => (this.spinning = false), 500);
      }
    },
    onPageChange(page) {
      this.pageNo = page;
      this.onGetEmpPostInfo();
    },
    onPageSizeChange(current, pageSize) {
      this.pageNo = 1;
      this.pageSize = pageSize;
      this.onGetEmpPostInfo();
    }
  }
};
</script>

<style lang="scss" scoped>
.avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  margin-right: 4px;
  vertical-align: middle;
}
.ant-form-text {
  padding: 0 8px;
}
.qy {
  display: flex;
  margin-left: 6px;
  .yxz {
    width: 700px;
    max-height: 150px;
    margin-left: 10px;
    overflow: auto;
    line-height: 30px;
  }
}
.icon-color {
  color: var(--primary);
}
</style>
